<template>
    <div class="shopList">
        <div class="leftBox" v-if="leftList">
            <div class="goodsItem" v-for="item in leftList" :key="item.id" @click="tryDetail(item.id)">
                <div class="img"><img :src="imgH+item.img.split(',')[0]"></div>
                <div class="goodsName">{{item.name}}</div>
                <div class="info">
                    <span>￥{{item.nowPrice?item.nowPrice.toFixed(2):'0.00'}}</span>
<!--                    <span class="sales">已售10W件</span>-->
                </div>
                <div class="bottomBtn">
                    <div v-if="item.shelf==1" class="push" @click.stop="getDown(item.id)">
                        <img src="./image/push.png">
                        下架
                    </div>
                    <div class="push" v-else @click.stop="unShelf">
                        <img src="./image/push.png">
                        已下架
                    </div>
                    <div class="edit" @click.stop="edit(item.id,item.shelf==1,item.openSku)">
                        <img src="./image/edit.png">
                        编辑
                    </div>
                </div>
            </div>
        </div>
        <div class="rightBox" v-if="rightList">
            <div class="goodsItem" v-for="item in rightList" :key="item.id" @click="tryDetail(item.id)">
                <div class="img"><img :src="imgH+item.img"></div>
                <div class="goodsName">{{item.name}}</div>
                <div class="info">
                    <span>￥{{item.nowPrice?item.nowPrice.toFixed(2):'0.00'}}</span>
<!--                    <span class="sales">已售10W件</span>-->
                </div>
                <div class="bottomBtn">
                    <div v-if="item.shelf==1" class="push" @click.stop="getDown(item.id)">
                        <img src="./image/push.png">
                        下架
                    </div>
                    <div v-else class="push" @click.stop="unShelf">
                        <img src="./image/push.png">
                        已下架
                    </div>
                    <div class="edit" @click.stop="edit(item.id,item.shelf==1,item.openSku)">
                        <img src="./image/edit.png">
                        编辑
                    </div>
                </div>
            </div>
<!--            <div class="size"></div>-->
        </div>
    </div>
</template>

<script>
    import {getGoodsDown} from '@/api/shop'
    import {showAlter} from "@/toast"
    import {showError} from "@/toast"
    export default {
        name: "shop-list",
        props:{
            leftList: {
                type:Array
            },
            rightList:{
                type: Array
            }
        },
        computed:{
            imgH(){
                return process.env.VUE_APP_IMG_DOMAIN
            }
        },
        methods:{
            getDown(id){
                getGoodsDown(id).then(res=>{
                    if (res.code==10000){
                        showAlter('下架成功')
                        this.$emit('freshList',id)
                    }
                })

            },
            edit(id,flag,sku){
                if (flag){
                    showError('请先下架商品')
                    return
                }
                // if (sku==1){
                //     showError('该商品存在规格，不能编辑')
                //     return
                // }
                this.$router.push({
                    path:`/form?id=${id}`
                })
            },
            unShelf(){
                showError('请联系客服上架商品')
            },
            tryDetail(id){
                this.$router.push({
                    path:`/detail?id=${id}`
                })
            }
        },
        mounted() {
            this.$emit('freshScroll',666)
        }
    }
</script>

<style scoped lang="stylus">
.shopList
    height 100%
    flex-flow row nowrap
    overflow hidden
    display flex
    .size
        width 100%
        height 300px
    .leftBox
        width 48.5%
        margin-right 3%
        overflow hidden
    .rightBox
        flex 1
        overflow hidden
    .goodsItem
        width 100%
        overflow hidden
        border-radius 10px
        background-color: #fff
        margin-bottom 5px
        .img
            height 175px
            width 100%
            img
                width 100%
                height 175px
        .goodsName
            color #333
            font-size 13px
            overflow hidden
            white-space nowrap
            text-overflow ellipsis
            line-height 25px
            margin-top 5px
            margin-left 9.5px
            margin-right 37px
        .info
            color #00A38F
            font-size 18px
            margin-top 14px
            margin-left 9.5px
            font-weight bold
            .sales
                color #999
                margin-left 4px
                font-size 8px
                font-weight 200
        .bottomBtn
            display flex
            margin-top 10px
            justify-content space-between
            .push,.edit
                flex 48%
                display flex
                justify-content center
                align-items center
                color #fff
                font-size 11px
                height 30px
                img
                    width: 11px
                    height: 11px
                    margin-right 5px
            .push
                background-color: #00a398
            .edit
                background-color: #81b72f

        
</style>